<template>
  <div class="flex" style="width: 100vw;height: 100vh;">
    <div class="main-left">
      <NuxtLink v-for="item in routeList" :key="item.url" :to="item.url">
        <div class="link" :class="{ 'active-link': activeRoute === item.url }">{{ item.title }}</div>
      </NuxtLink>
    </div>
    <div class="main-right">
      <slot />
    </div>
  </div>
</template>

<script setup>

let routeList = [
  {
    title: '首页',
    url: '/'
  },
  {
    title: '路由',
    url: '/route'
  },
  {
    title: '组件',
    url: '/comp'
  },
  {
    title: '状态',
    url: '/state'
  },
  {
    title: '数据',
    url: '/server'
  },
  {
    title: '登录',
    url: '/login'
  }
]

const nuxt = useNuxtApp()

let activeRoute = ref('')

watch(() => nuxt._route.fullPath, (newValue) => {
  activeRoute.value = newValue
}, { immediate: true })

</script>

<style lang="scss" scoped>
.main-left {
  flex-shrink: 0;
  width: 200px;
  height: 100vh;
  border-right: 1px solid #ccc;

  .link {
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-left: 20px;
    width: 100%;
    height: 50px;
    background-color: #fff;
    border-bottom: 1px solid #ccc;

  }

  .active-link {
    background-color: #88c4ff;
  }
}

.main-right {
  flex-grow: 1;
  padding: 20px;
}
</style>